<template>
	<view class="wrapper">
		<scroll-view scroll-y="true" class="main-content">
			<view class="type-filtering">
				<view class="type-btn" :class="{active: item.isSelect}" v-for="(item, index) in typeList" :key="index" @click="switchingSelection(item)">
				    {{item.label}} 
				</view>
			</view>
			<view class="video-list">
				<view class="video-item" v-for="(item, index) in 1" :key="index">
					<view class="title">
						2024-07-03
					</view>
					<view class="sub-title">
						
					</view>
					<view class="video-box">
						<video 
						src="https://img.cdn.aliyun.dcloud.net.cn/guide/uniapp/%E7%AC%AC1%E8%AE%B2%EF%BC%88uni-app%E4%BA%A7%E5%93%81%E4%BB%8B%E7%BB%8D%EF%BC%89-%20DCloud%E5%AE%98%E6%96%B9%E8%A7%86%E9%A2%91%E6%95%99%E7%A8%8B@20200317.mp4"
						:autoplay="true"
						:muted="true"
						:show-mute-btn="true"
						:enable-play-gesture="true"
						></video>
					</view>
					<view class="bottom-btn">
						<view class="download" @click="downloadVideo()">
							下载
						</view>
						<button class="share" open-type="share">分享</button>
					</view>
				</view>
			</view>
		</scroll-view>
		<uni-popup type="center" ref="downloadPrompt">
			<view class="download-box">
				<view class="title">
					链接已复制
				</view>
				<view class="video-link">
					http://1255586792.vod2.myqcloud.com/398c6e54vodcq1255586792/07fda1cd1253642699295052837/jfPkHIV6a8A.mp4?
				</view>
				<view class="tips">
					粘贴到浏览器打开即可下载视频
				</view>
				<view class="know" @click="iKnow()">
					知道了
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				typeList: [{
					label: '制作完成',
					type: 1,
					isSelect: true,
				},{
					label: '正在制作',
					type: 2,
					isSelect: false,
				},{
					label: '制作失败',
					type: 3,
					isSelect: false,
				}],
			}
		},
		methods: {
			switchingSelection(item){
				this.typeList.forEach((item, index) => {
					item.isSelect = false;
				})
				item.isSelect = true;
			},
			downloadVideo() {
				this.$refs.downloadPrompt.open();
				this.copy('要复制的内容');
			},
			iKnow() {
				this.$refs.downloadPrompt.close();
			},
			copy(data){
				uni.setClipboardData({
					data, //要被复制的内容
					success: (res) => { //复制成功的回调函数
						uni.showToast({ //提示
							title: '复制成功'
						});
					},
					fail: (err) => {
						
					}
				});
			},
		}
	}
</script>

<style scoped lang="scss">
	.wrapper{
		.type-filtering{
			padding: 30upx 0;
			display: flex;
			flex-direction: row;
			justify-content: center;
			.type-btn{
				margin-right: 30upx;
				background: #ffffff;
				border-radius: 10upx;
				padding: 6upx 30upx;
				font-size: 30upx;
				color: #666;
			}
			.active{
				background: #70b5fc;
				color: #ffffff;
			}
		}
		.video-list{
			padding: 0 20upx;
			.video-item{
				background-image: linear-gradient(to right, #77b8fc, #3a9afa);
				margin: 20upx 0;
				padding: 20upx;
				border-radius: 20upx;
				.title{
					
				}
				.sub-title{
					
				}
				.bottom-btn{
					display: flex;
					.download,.share{
						background: #fff;
						height: 60upx;
						line-height: 60upx;
						border-radius: 40upx;
						padding: 0 20upx;
					}
					.share{
						margin-left: 10upx;
					}
				}
			}
		}
		.download-box{
			width: 92vw;
			background: #fff;
			border-radius: 20upx;
			padding: 20upx;
			.title{
				display: flex;
				justify-content: center;
				align-items: center;
			}
			.video-link{
				word-wrap: break-word;
			}
			.tips{
				font-size: 24upx;
			}
			.know{
				margin: 0 auto;
				width: 150upx;
				height: 70upx;
				line-height: 70upx;
				background: #3a9afa;
				border-radius: 20upx;
				color: #fff;
				display: flex;
				justify-content: center;
				align-items: center;
				margin-top: 20upx;
			}
		}
	}

</style>
